<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>所有注册用户</h3>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
            <p>变异方法，改变原来的数组</p>
        </ul>
        <button @click="addpush"> push </button>
        <button @click="addpop"> pop </button>
        <button @click="addshift"> shift </button>
        <button @click="addunshift"> unshift </button>
        <button @click="addsplice"> splice </button>
        <button @click="addsort"> sort </button>
        <button @click="addreverse"> reverse </button>
    </div>
    <script type="text/javaScript"  charset="UTF-8" src="../JS文件/vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{
                    message:'hello',
                    usemame:'Jack'
                },
                {
                    message:'hi',
                    usermame:'Amily'
                }
            ],
            itmes:[{id:1},{id:2},{id:4}],
            rr:{ lie:""},
            num:[1,3,2.8,5,9,0]
            },
            methods:{
                addsplice(){
                    console.log(this.list)
                    this.list.splice(1,0,{message:"insert",username:"newuser"})
                    var jj=JSON.stringify(this.list)
                       console.log(JSON.stringify(this.list))
                       console.log(JSON.parse(jj))
                },
                addpop(){
                    this.list.pop();
                    console.log(JSON.stringify(this.list))
                },
                addpush(){
                    this.list.push({message:"Good Mornig",username:"Rose"});
                    console.log(JSON.stringify(this.list))
                },
                addshift(){
                    this.list.shift();
                    console.log(JSON.stringify(this.list))
                },
                addunshift(){
                    this.list.unshift({message:"Good Morning",username:"Rose"});
                    console.log(JSON.stringify(this.list))
                },
                addsort(){
                    console.log(this.num)
                    this.num.sort()
                    console.log(this.num)
                },
                addreverse(){//倒序输出数组,适用于对象数组和元素数组
                    console.log(JSON.stringify(this.list))
                    this.list.reverse()
                    console.log(JSON.stringify(this.list))
                },
            }
        });
    </script>
</body>
</html>